<template>
  <common-card title="累计用户数" value="1,887,503">
    <template>
      <div id="total-users-chart" :style="{ width: '100%', height: '100%' }"></div>
    </template>
    <template v-slot:footer>
      <div class="total-users-footer">
        <span>日同比</span>
        <span class="emphasis">8.73%</span>
        <div class="increase"></div>
        <span class="month">月同比</span>
        <span class="emphasis">35.91%</span>
        <div class="decrease"></div>
      </div>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from "../../mixins/commonCardMixin";
export default {
  mixins: [commonCardMixin],
  mounted() {
    const chartDom = document.getElementById("total-users-chart");
    const chart = this.$echarts.init(chartDom);
    chart.setOption({
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      },
      xAxis: {
        type: 'value',
        show: false
      },
      yAxis: {
        type: 'category',
        show: false
      },
      series: [{
        type: 'bar',
        stack: '总量', // 合并一条柱状图
        data: [100],
        barWidth: 10,
        itemStyle: {
          color: '#45c946'
        }
      }, {
        type: 'bar',
        stack: '总量', // 合并一条柱状图
        data: [200],
        itemStyle: {
          color: '#eee'
        }
      }, {
        type: 'custom', // 自定义绘图--三角形
        stack: '总量',
        data: [100],
        renderItem: (params, api) => {
          // 点和坐标系转换
          const value = api.value(0) // 获取data的x轴坐标值
          const endPoint = api.coord([value, 0]); // 转成坐标点
          console.log(endPoint);
          // svg像是绘制图形
          return {
            // type: 'path',
            type: 'group', // 一组图形
            position: endPoint,
            children: [{
              type: 'path',
              // 参考笔记
              shape: {
                d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
                x: -5,
                y: -20,
                width: 10,
                height: 10,
                layout: 'cover' // 填充
                // layout: 'center' // 原来的图形（默认）
              },
              style: {
                fill: '#45c946'
              }
            },{
              type: 'path',
              // 参考笔记
              shape: {
                d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
                x: -5, //偏移量
                y: 10,
                width: 10,
                height: 10,
                layout: 'cover'
              },
              style: {
                fill: '#45c946'
              }
            }],
          }
        }
      }]
    })
  },
};
</script>

<style scoped lang="scss">
.total-users-footer {
  display: flex;
  align-items: center;
  .month {
    margin-left: 10px;
  }
}
</style>